import React, { Component } from 'react';
import Taro, { Config } from '@tarojs/taro';
import {ComponentClass} from 'react'
import {AtSearchBar} from 'taro-ui'
import {Navigator, View} from '@tarojs/components'
import {CityLocation} from '../utils/server.interface'
import {http} from '../utils/http'
import {MOVIE_CINEMAS} from '../constants/api'
import MovieHeaderBar from "./header-bar/movie-header-bar";
import {getHeadTop} from "../utils/tools";
import Cinema from "./cinema/cinema";
import {h5Wx} from "../utils/h5.service";
import GzhAuth from "../components/gzh-auth/gzh-auth"
import './index.scss'

type PageStateProps = {
  location: CityLocation
}
type PageDispatchProps = {}
type PageOwnProps = {}
type PageState = {
  loadMoreStatus: "more" | "loading" | "noMore"
  searchKey: string
  cinemaList: any
  searchBarTop: number
  location: any
  ML: any
}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface Movie {
  props: IProps
}

class Movie extends Component {
  state: PageState = {
    loadMoreStatus: 'loading',
    cinemaList: [],
    searchKey: '',
    searchBarTop: 0,
    location: null,
    ML: {},
  }
  page = 1

  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    const headTop = getHeadTop()
    const searchBarTop = headTop.statusBar > 20 ? (headTop.statusBar + headTop.top + 40) : (headTop.statusBar + headTop.top + 40)
    this.setState({searchBarTop})
  }

  async componentDidShow() {
    const location = Taro.getStorageSync("Mlocation") || {region_id: 0, area_name: '未知'};
    const ML = Taro.getStorageSync("ML");
    if (location.region_id == 0 || location.region_id == undefined) {
      Taro.navigateTo({
        url: "/other/select-city/movie-city"
      })
      return
    }
    this.setState({location, ML})
    const msg = await this.getData(this.page, location.region_id, ML)
    if (msg) {
      this.setState({
        cinemaList: msg.cinemaList
      })
    }
  }

  async getData(page, cityId, ML) {
    const searchKey = this.state.searchKey
    const List = await http.MGet(MOVIE_CINEMAS, {
      page,
      count: 20,
      cityId,
      lng: ML.lng,
      lat: ML.lat,
      cinemaName: searchKey
    })
    if (List && List.cinemaList.length >= 20) {
      this.page++
      this.setState({loadMoreStatus: 'more'})
    } else {
      this.setState({loadMoreStatus: 'noMore'})
    }
    return List
  }

  async joinMore() {
    const {location, ML} = this.state
    const oldList = this.state.cinemaList
    const msg = await this.getData(this.page, location.region_id, ML)
    if (msg) {
      this.setState({
        cinemaList: [...oldList, ...msg.cinemaList]
      })
    }
  }

  async searchConfirm() {
    this.page = 1
    this.search(this.page)
  }

  async search(page) {
    Taro.showLoading({title: '加载中...'})
    this.setState({
      loadMoreStatus: 'loading'
    })
    const {location, ML} = this.state
    const ret = await this.getData(page, location.region_id, ML);
    Taro.hideLoading()
    if (ret && ret.cinemaList && ret.cinemaList.length > 0) {
      this.setState({loadMoreStatus: 'more', cinemaList: ret.cinemaList})
    } else {
      this.setState({loadMoreStatus: 'noMore', cinemaList: []})
      Taro.showToast({
        title: '没有更多数据了',
        icon: 'none'
      })
    }
  }

  input(value) {
    if (value) {
      this.setState({searchKey: value})
    }
  }

  clearSearch() {
    this.setState({searchKey: ''}, () => {
      this.search(1)
    })
  }

  async onReachBottom() {
    if (this.state.loadMoreStatus != 'noMore') {
      this.joinMore()
    }
  }

  render() {
    const {loadMoreStatus, searchBarTop, searchKey, cinemaList, location} = this.state
    return (
      <View className='moveList'>
        <GzhAuth />
        <View className='head-bg' style={`height: ${searchBarTop}Px;`}>
          <MovieHeaderBar index={1}></MovieHeaderBar>
        </View>
        <View className='haeder'>
          <Navigator className='add-city' url='/other/select-city/movie-city' hoverClass='none'>
            {location.area_name}
          </Navigator>
          <View className='search-box'>
            <AtSearchBar className='search' onConfirm={this.searchConfirm.bind(this)}
              onClear={this.clearSearch.bind(this)} onActionClick={this.searchConfirm.bind(this)}
              value={searchKey} onChange={this.input.bind(this)} placeholder='搜索影院'
            ></AtSearchBar>
          </View>
        </View>
        <View className='cinema-box'>
          {cinemaList.length > 0 ? <Cinema data={cinemaList}></Cinema> :
            <View className='sessions-box-none'>暂无该影院</View>}
        </View>
      </View>
    )
  }
}

export default Movie as ComponentClass<PageOwnProps, PageState>
